<!--课件资源的Btn-->
<script setup lang="ts">

import {ref} from "vue";

const props = defineProps(['buttonData'])

function getIcon() {
  if (props.buttonData.selected) {
    return props.buttonData.unSelectedIcon
  }
  return props.buttonData.selectedIcon
}

///绑定一菜单的基础样式
const subMenuStyle = ref({
  width: getWidth(),
  height: getHeight(),
  paddingLeft: getBtnPadding(),
  paddingRight: getBtnPadding(),
});

const getRootStyle = ref({
  marginTop: getMarginTop(),
  height: 'auto',
  cursor: 'pointer', /*鼠标移动上去是手型*/
});

///获取按钮的宽度
function getWidth() {
  if (props.buttonData.type === 0) {
    return '162px';
  } else if (props.buttonData.type === 1) {
    return '142px';
  } else {
    return 'auto';
  }
}

function getHeight() {
  if (props.buttonData.type == 0) {
    return '48px';
  } else if (props.buttonData.type == 1) {
    return '40px';
  } else {
    return '32px';
  }
}


///获取上边距
function getMarginTop() {
  if (props.buttonData.type === 1) {
    return '50px';
  } else if (props.buttonData.type === 2) {
    return '32px';
  } else {
    return '20px'
  }
}

function getLineWidth() {
  if (props.buttonData.type == 0 || props.buttonData.type == 2) {
    return '16px'
  }
  return '32px'
}

const subLeftLineStyle = ref({
  width: getLineWidth(),
  height: '1px',
  backgroundColor: 'rgba(255,255,255,0.6)',
});

const subLineRightStyle = ref({
  width: getRightLineWidth(),
  height: '1px',
  backgroundColor: 'rgba(255,255,255,0.6)',
});

function getRightLineWidth() {
  // console.log(`我这里有刷新${props.buttonData.title}————${props.buttonData.type}----${props.buttonData.showRightLine}`);
  if (props.buttonData.type == 0 || props.buttonData.type == 2) {
    return '0px';
  }
  if (props.buttonData.showRightLine) {
    return '16px';
  }
  return '0px';
}


const subLineIconStyle = ref({
  width: getIconWidth(),
  height: getIconWidth(),
  paddingLeft: getIconLeft(),
});

function getIconLeft() {
  if (props.buttonData.type == 0) {
    return '20px';
  }
  return '0px';
}

function getIconWidth() {
  if (props.buttonData.type == 0 || props.buttonData.type == 1) {
    return '32px';
  }
  return '24px';
}

function getBtnPadding() {
  if (props.buttonData.type == 2 || props.buttonData.type == 1) {
    return '10px';
  }
  return '0px';
}

function clickHandler(){
  console.log(`ddddddd点击子组件${props.buttonData}`);
  console.log(`ddddddd点击子组件${props.buttonData.title}`);
  // props.buttonData.selected = true;
  // props.buttonData.showRightLine = true;
}
</script>

<template>
  <div class="rootStyleBtn" :style="getRootStyle" @click="clickHandler">
    <div style="align-items: center;display: flex;justify-content: center">
      <div v-if="props.buttonData.showLeftLine" :style="subLeftLineStyle"></div>
      <!--暂位-->
      <div v-if="!props.buttonData.showLeftLine" style="width: 16px;height: 0"/>
      <div class="mainStyle" :class="{'mainStyleSelected':props.buttonData.selected}" :style="subMenuStyle">
        <img :src="getIcon()" :style="subLineIconStyle">
        <div class="styleText">
          {{ props.buttonData.title}}
        </div>
      </div>
      <div v-if="(props.buttonData.showRightLine&&props.buttonData.type===1)" class="rightLine" :class="subLineRightStyle"></div>
      <div v-if="!(props.buttonData.showRightLine&&props.buttonData.type===1)" style="width: 16px;height: 1px"/>
    </div>
  </div>
</template>

<style scoped>

.rightLine{
  width: 16px;
  height: 1px;
  background: #E0E0E0;
}

.unrightLine{
  width: 16px;
  height: 1px;
  background: red;
}

.rootStyleBtn {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 92px;
}

.mainStyle {
  display: flex;
  flex-direction: row;
  padding: 10px 20px;
  background: #ffffff;
  border-radius: 6px;
  align-items: center;
  font-size: 16px;
  white-space: nowrap;/*禁止换行*/
}

.mainStyleSelected {
  background: #3C8DF9;
  color: #E0E0E0;
}

.styleText {

  align-items: center;
  margin-left: 10px;
}
</style>